<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="header-warp">
          <div class="warp">
            <img src="../../../assets/images/home/calendar.png" />
          </div>
          <div class="header-word">工作日历</div>
        </div>
      </div>
    </template>
    <div class="calendar-box">
      <el-calendar ref="calendar">
        <template #header="{ date }">
          <div class="header-box">
            <span>{{ day(date.date).format('YYYY年MM月') }}</span>
            <el-icon class="mark el-icon-star-on"><StarFilled /></el-icon>
            <el-button-group>
              <el-button size="small" @click="selectDate('prev-month')">上个月</el-button>
              <el-button size="small" @click="selectDate('today')">今天</el-button>
              <el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
            </el-button-group>
          </div>
        </template>
        <template #date-cell="{ data }">
          <calendar-card-item>
            <div class="m-2">
              <span>{{ day(data.date).date() }}</span>
              <div class="circle" v-if="hasBusiness()"></div>
            </div>
          </calendar-card-item>
        </template>
      </el-calendar>
    </div>
  </el-card>
</template>

<script>
import calendar from '@/assets/images/home/calendar.png';
import CalendarCardItem from './calendar-card-item.vue';
import day from 'dayjs';
export default {
  name: 'notice-card',
  components: {
    CalendarCardItem,
  },
  data() {
    return {
      day,
      calendar,
    };
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
    selectDate(val) {
      console.log(val, this.$refs.calendar);
      this.$refs.calendar.selectDate(val);
    },
    hasBusiness() {
      // 1/6的概率返回true
      const num = Math.floor(Math.random() * 6);
      if (num === 1) {
        return true;
      }
      return false;
    },
  },
};
</script>
<style scoped lang="scss">
// 超出显示
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-header {
  display: flex;
  background-color: #ffffff;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  height: 47px;
  padding: 0 20px;
  .more {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #a4a5a9;
    cursor: pointer;
  }
}
.header-box {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  .mark {
    color: #feb432;
    font-size: 20px;
  }
}
:deep(.el-card__header) {
  padding: 0;
  background-color: #ffffff !important;
}
.header-warp {
  display: flex;
  .warp {
    margin-right: 7px;
    width: 16px;
    height: 16px;
    padding-top: 2px;
  }
  .header-word {
    font-weight: 700;
  }
}
:deep(.el-calendar) {
  border: none !important;
  --el-calendar-border: none !important;
  .el-calendar-table {
    td {
      border: none;
    }
    .current {
      width: 50px;
      height: 50px;
    }
    .el-calendar-day {
      height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .m-2 {
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 34px;
        position: relative;
        .circle {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ed715b;
          margin: 0 auto;
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
        }
      }
    }
  }
}
</style>
